<script setup lang="ts">
import { addTrademarkAPI, delTrademarkAPI, updateTrademarkAPI } from '@/apis/permission';
import { useGetTradeMark } from '@/hooks';
import {trankRes } from '@/types/permission';
import { UploadProps } from 'element-plus';
import { onMounted, ref } from 'vue';

const dialogVisible = ref(false)
const  {page,limit,total,dataList,getTradeMarkList}=useGetTradeMark()

onMounted(() => {
    getTradeMarkList()
})

//当前页码改变
const changePage = (currentPge: number) => {
    page.value = currentPge
    getTradeMarkList()
}
//当前页码大小改变
const changePageSize = (pageSize: number) => {
    limit.value = pageSize
    getTradeMarkList()
    page.value = 1
}

// 收集表单数据
const form = ref()
const TradeMarkdata = ref<trankRes>({
    tmName: '',
    logoUrl: ''
})
//定义表单规则]
// 校验规则
const checktmNmame = (_rule: any, value: any, callback: any) => {
    if (value.length > 2) {
        callback()
    } else {
        callback(new Error('品牌名称至少要两位'))
    }
}
const rules = {
    tmName: [
        { validator: checktmNmame, trigger: 'blur' }
    ]
}


//上传图片之前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('文件类型必须是jpg格式')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小不能大于2MB')
        return false
    }
    return true
}

//上传图片成功

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    _uploadFile
) => {
    TradeMarkdata.value.logoUrl = response.data
}


//添加品牌
const openDialog = () => {
    dialogVisible.value = true
    TradeMarkdata.value.id = undefined
    TradeMarkdata.value.tmName = ''
}

//修改品牌
const updateTradeMark = (row: trankRes) => {
    dialogVisible.value = true
    Object.assign(TradeMarkdata.value, row)
}
//对话框取消
const cancel = () => {
    form.value.resetFields()
    dialogVisible.value = false
}

//对话框确认
const confirm = async () => {
    await form.value.validate()
    if (!TradeMarkdata.value.id) {
        await addTrademarkAPI(TradeMarkdata.value)
        ElMessage.success('添加成功')
    } else {
        await updateTrademarkAPI(TradeMarkdata.value)
        ElMessage.success('修改成功')
    }
    dialogVisible.value = false
    form.value.resetFields()
    getTradeMarkList()

}

//删除品牌
const onConfirm=async(id:number)=>{
    await delTrademarkAPI(id)
    if(dataList.value.length >1){
        getTradeMarkList()
    }else{
        page.value-1
        getTradeMarkList()
    }
    ElMessage.success('删除成功')
}
</script>

<template>
    <el-card>
        <!-- 头部 -->
        <el-button type="primary" icon="Plus" @click="openDialog" >添加品牌</el-button>
        <!-- 表格组件 -->
        <el-table style="margin: 10px 0px;" border :data="dataList">
            <el-table-column align="center" width="80px" type="index" label="序号" />
            <el-table-column prop="tmName" label="品牌名称" />
            <el-table-column label="品牌LOGO">
                <template #="{ row }">
                    <img :src="row.logoUrl" alt="" style="width: 100px; height: 100px;">
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="品牌操作">
                <template #="{ row }">
                    <el-button type="primary" size="small" icon="Edit" @click="updateTradeMark(row)"></el-button>
                    <el-popconfirm :title="`你确认删除${row.tmName}吗?`" @confirm="onConfirm(row.id)">
                        <template #reference>
                            <el-button type="primary" size="small" icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5, 8, 10]"
            :background="true" layout="prev, pager, next, jumper,->,sizes, total," :total="total"
            @current-change="changePage" @size-change="changePageSize" />
    </el-card>
    <!-- 弹框组件 -->
    <el-dialog v-model="dialogVisible" :title="TradeMarkdata.id ? '编辑品牌' : '添加品牌'">
        <el-form style="width: 80%;" :model="TradeMarkdata" :rules="rules" ref="form">
            <el-form-item label="品牌名称" label-width="80px" prop="tmName">
                <el-input placeholder="请输入品牌名称" v-model="TradeMarkdata.tmName"></el-input>
            </el-form-item>
            <el-form-item label="品牌LOGO" label-width="80px" prop="logoUrl">
                <el-upload class="avatar-uploader" action="/api/admin/product/fileUpload" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="TradeMarkdata.logoUrl" :src="TradeMarkdata.logoUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>